<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <form bindsubmit="formSubmit" reportSubmit="true">
		            <view class="form-group-name">基本信息</view>
		            <view class="input-group-list">
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">联系人</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="realname" placeholder="必填" placeholderClass="placeholder" :value="data.store?data.store.realname:''"></input>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">联系电话</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="tel" placeholder="必填" placeholderClass="placeholder" :value="data.store?store.tel:''"></input>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group" v-if="__platform=='wx'">
		                    <view class="flex-grow-0 flex-y-center input-group-label">微信号</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="wechat_name" placeholder="" placeholderClass="placeholder" :value="data.store?store.wechat_name:''"></input>
		                    </view>
		                </view>
		            </view>
		            <view class="form-group-name">店铺信息</view>
		            <view class="input-group-list">
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">店铺名称</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="name" placeholder="必填" placeholderClass="placeholder" :value="data.store?store.name:''"></input>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">所在地区</view>
		                    <view class="flex-grow-1">
		                        <view @click="showAreaPicker" class="flex flex-row" style="height: 100%;padding-right:32upx;">
		                            <view class="flex-grow-1 flex-y-center">
		                                <view v-if="!edit_district.province">请选择地区</view>
		                                <view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis" v-else>
		                                    {{data.edit_district.province.name}}{{data.edit_district.city.name}}{{data.edit_district.district.name}}
		                                </view>
		                            </view>
		                            <view class="flex-grow-0 flex-y-center">
		                                <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
		                            </view>
		                        </view>
		                        <view style="display: none">
		                            <input name="province_id" type="hidden" :value="data.edit_district.province.id"></input>
		                            <input name="city_id" type="hidden" :value="data.edit_district.city.id"></input>
		                            <input name="district_id" type="hidden" :value="data.edit_district.district.id"></input>
		                        </view>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">详细地址</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="address" placeholder="必填" placeholderClass="placeholder" :value="data.store?data.store.address:''"></input>
		                    </view>
		                </view>
		                <view class="input-group">
		                    <picker @change="data.storeCommonCatChange" class="" name="data.store_common_cat_id" :range="data.store_common_cat_list" rangeKey="name" style="position: relative">
		                        <view class="flex flex-row input-group">
		                            <view class="flex-grow-0 flex-y-center input-group-label">所售类目</view>
		                            <view class="flex-grow-1" style="padding-right:32upx;">
		                                <view class="flex flex-row" style="height: 100%;">
		                                    <view class="flex-grow-1 flex-y-center" v-if="data.store_common_cat_list[store_common_cat_index]">{{data.store_common_cat_list[store_common_cat_index].name}}
		                                    </view>
		                                    <view class="flex-grow-1 flex-y-center" v-else>
		                                        <view v-if="data.store.store_common_cat_id">{{data.store.store_common_cat_name}}</view>
		                                        <view v-else>请选择类目</view>
		                                    </view>
		                                    <view class="flex-grow-0 flex-y-center">
		                                        <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
		                                    </view>
		                                </view>
		                            </view>
		                        </view>
		                    </picker>
		                </view>
		                <view class="flex flex-row input-group">
		                    <view class="flex-grow-0 flex-y-center input-group-label">客服电话</view>
		                    <view class="flex-grow-1">
		                        <input class="flex-y-center" name="service_tel" placeholder="必填" placeholderClass="placeholder" :value="data.store?store.service_tel:''"></input>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group" style="height: auto;min-height: 115upx">
		                    <view class="flex-grow-0 flex-y-center input-group-label">
		                        <view>
		                            <view>店铺头像</view>
		                            <view style="font-size: 9pt;color: #888;line-height: 1">80×80</view>
		                        </view>
		                    </view>
		                    <view @click="uploadLogo" class="flex-grow-1">
		                        <view class="flex flex-row" style="height: 100%;padding: 0 32upx">
		                            <view class="flex-grow-1 flex-y-center">
		                                <view style="padding: 18upx 24upx;text-align: right;width: 100%;font-size: 0" v-if="data.store.logo">
		                                    <image :src="data.store.logo" style="height: 80upx;width: 80upx"></image>
		                                </view>
		                                <view v-else>请选择图片</view>
		                                <input name="logo" style="display: none" :value="data.store.logo"></input>
		                            </view>
		                            <view class="flex-grow-0 flex-y-center">
		                                <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view class="flex flex-row input-group" style="height: auto;min-height: 115upx">
		                    <view class="flex-grow-0 flex-y-center input-group-label">
		                        <view>
		                            <view>店铺背景</view>
		                            <view style="font-size: 9pt;color: #888;line-height: 1">484×130</view>
		                        </view>
		                    </view>
		                    <view @click="uploadHeaderBg" class="flex-grow-1">
		                        <view class="flex flex-row" style="height: 100%;padding: 0 32upx">
		                            <view class="flex-grow-1 flex-y-center">
		                                <view style="padding: 18upx 24upx;text-align: right;width: 100%;font-size: 0" v-if="data.store.header_bg">
		                                    <image :src="data.store.header_bg" style="height: 80upx;width: 298upx"></image>
		                                </view>
		                                <view v-else>请选择图片</view>
		                                <input name="header_bg" style="display: none" :value="data.store.header_bg"></input>
		                            </view>
		                            <view class="flex-grow-0 flex-y-center">
		                                <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		            <button class="submit-btn" formType="submit">提交</button>
		        </form>
		    </view>
			<area-picker v-bind="{data:data}" @hideAreaPicker="hideAreaPicker" @areaPickerConfirm="areaPickerConfirm" @areaPickerChange="areaPickerChange"></area-picker>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
//#ifdef MP-WEIXIN
var Vue = require('vue')
//#endif
//#ifdef H5
var Vue = require('vue').default
//#endif
	import areaPicker from './../../../components/area-picker/area-picker.vue';
	var e = require("./../../../components/area-picker/area-picker.js");
	var area_picker = require("./../../../components/area-picker/area-picker.js"), app = Vue.prototype.getApp, api = Vue.prototype.getApp.api;

	export default {
		extends:{
			areaPicker
		},
		data() {
			return {
				data:{
					
				}
			};
		},
		 onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.getDistrictData(function(t) {
            area_picker.init({
                page: e,
                data: t
            });
        }), e.getApp.core.showLoading({
            title: "正在加载"
        }), e.getApp.request({
            url: e.getApp.api.store.user.setting,
            success: function(t) {
                e.getApp.core.hideLoading(), e.setData(t.data);
            }
        });
    },
	methods:{
		 getDistrictData: function(e) {
			var that=this;
		    var a = that.getApp.core.getStorageSync(that.getApp.const.DISTRICT);
		    if (!a) return that.getApp.core.showLoading({
		        title: "正在加载",
		        mask: !0
		    }), void that.getApp.request({
		        url: that.getApp.api.default.district,
		        success: function(t) {
		            that.getApp.core.hideLoading(), 0 == t.code && (a = t.data, that.getApp.core.setStorageSync(that.getApp.const.DISTRICT, a), 
		            e(a));
		        }
		    });
		    e(a);
		},
		onAreaPickerConfirm: function(t) {
		    this.setData({
		        edit_district: {
		            province: {
		                id: t[0].id,
		                name: t[0].name
		            },
		            city: {
		                id: t[1].id,
		                name: t[1].name
		            },
		            district: {
		                id: t[2].id,
		                name: t[2].name
		            }
		        }
		    });
		},
		storeCommonCatChange: function(t) {
		    this.setData({
		        store_common_cat_index: t.detail.value
		    });
		},
		formSubmit: function(t) {
		    var e = this;
		    e.getApp.core.showLoading({
		        title: "正在提交",
		        mask: !0
		    }), t.detail.value.form_id = t.detail.formId, t.detail.value.store_common_cat_id = e.data.store_common_cat_index ? e.data.store_common_cat_list[e.data.store_common_cat_index].id : e.data.store && e.data.store.store_common_cat_id ? e.data.store.store_common_cat_id : "",
		    e.getApp.request({
		        url: e.getApp.api.store.user.setting_submit,
		        method: "post",
		        data: t.detail.value,
		        success: function(t) {
		            e.getApp.core.hideLoading(), 0 == t.code ? e.getApp.core.showModal({
		                title: "提示",
		                content: t.msg,
		                showCancel: !1,
		                success: function(t) {
		                    t.confirm && e.getApp.core.navigateBack({
		                        delta: 1
		                    });
		                }
		            }) : e.showToast({
		                title: t.msg
		            });
		        }
		    });
		},
		 uploadLogo: function() {
		    var e = this;
		    getApp().uploader.upload({
		        start: function(t) {
		            getApp().core.showLoading({
		                title: "正在上传",
		                mask: !0
		            });
		        },
		        success: function(t) {
		            0 == t.code ? (e.data.store.logo = t.data.url, e.setData({
		                store: e.data.store
		            })) : e.showToast({
		                title: t.msg
		            });
		        },
		        error: function(t) {
		            e.showToast({
		                title: t
		            });
		        },
		        complete: function() {
		            getApp().core.hideLoading();
		        }
		    });
		},
		uploadHeaderBg: function() {
		    var e = this;
		    e.getApp.uploader.upload({
		        start: function(t) {
		            e.getApp.core.showLoading({
		                title: "正在上传",
		                mask: !0
		            });
		        },
		        success: function(t) {
		            0 == t.code ? (e.data.store.header_bg = t.data.url, e.setData({
		                store: e.data.store
		            })) : e.showToast({
		                title: t.msg
		            });
		        },
		        error: function(t) {
		            e.showToast({
		                title: t
		            });
		        },
		        complete: function() {
		            e.getApp.core.hideLoading();
		        }
		    });
		}
	},
   
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    }
	}
</script>

<style scoped>
.block-button {
    display: block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    background: none;
}

.block-button:after {
    display: none;
}

.placeholder {
    color: #aaa;
}

.form-group-name {
    color: #888;
    padding: 32upx 0 8upx 32upx;
}

.input-group {
    background: #fff;
    height: 100upx;
    position: relative;
}

.input-group .input-group-label {
    padding: 0 32upx;
    line-height: inherit;
    min-width: 200upx;
    white-space: nowrap;
}

.input-group picker,.input-group input {
    height: 100%;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
}

.input-group-list {
    border-top: 1upx solid #e9e9e9;
    border-bottom: 1upx solid #e9e9e9;
}

.input-group-list .input-group:after {
    display: block;
    content: " ";
    height: 0;
    border-bottom: 1upx solid #eee;
    position: absolute;
    bottom: 0;
    left: 32upx;
    right: 32upx;
}

.input-group-list .input-group:last-child:after {
    display: none;
}

.submit-btn {
    background: #ff4544;
    border-radius: 8upx;
    color: #fff;
    margin: 64upx 32upx;
}

.apply-result {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10;
    transition: 200ms;
    visibility: hidden;
    opacity: 0;
}

.apply-result.show {
    visibility: visible;
    opacity: 1;
}

.apply-result .review-status {
    text-align: center;
    padding: 32upx;
    margin: 32upx;
}

.apply-result .status-0 {
}

.apply-result .status-1 {
    color: #1aa349;
}

.apply-result .status-2 {
    color: #ff4544;
}

.apply-result .review-result {
    text-align: center;
    padding: 32upx;
    margin: 32upx;
}

.view-data-btn {
    color: #387ee8;
    padding: 32upx;
}
</style>
